<template>
	<page-meta :root-font-size="fontSize"></page-meta>
	<view>
		<view class="back"><h-navigateBack></h-navigateBack></view>
		<image src="../../static/login/login_top.png" mode="widthFix" class="width-750"></image>
		<view class="flex flex-ac form-item" style="margin-top: 140rpx;">
			<image src="../../static/login/phone.png" mode="widthFix" class="width-30"></image>
			<view style="margin-left: 20rpx;"><input type="number" style="width: 550rpx;" placeholder="请输入手机号码"
					maxlength="11" placeholder-class="placeholderclass" v-model="phone" /></view>
		</view>
		<view class="flex flex-ac form-item">
			<image src="../../static/login/password.png" mode="widthFix" class="width-30"></image>
			<view style="margin-left: 20rpx;"><input type="text" style="width: 550rpx;" placeholder="请输入密码"
					password="true" placeholder-class="placeholderclass" v-model="password" /></view>
		</view>
		<view class="flex flex-ac" style="width: 100%;">
			<text style="text-align: right;width: 100%;margin-top: 30rpx;margin-right: 50rpx;color: #e74c3c;"
				@click="forgetPassWord">忘记密码？</text>
		</view>
		<view class="flex flex-ac flex-jc bg-main pd-30 fs-34 bt-login" hover-class="u-hover-class" @click="login">登录
		</view>
		<view style="display: flex;">
			<view class="flex flex-ac flex-jc pd-30 fs-34 bt-re" style="width: 70%;" hover-class="bt-hover" @click="register">注册</view>
			<view class="flex flex-ac flex-jc pd-30 fs-34 bt-re" style="width: 30%;" hover-class="bt-hover" @click="closed">退出</view>
		</view>
		<!-- <view class="OAuthLogin">
			<image src="../../static/login/wxLogo.png" class="wxClass" @click="wxLogin"></image>
		</view> -->
	</view>
</template>

<script>
	var _self;
	var app = getApp().globalData;
	export default {
		data() {
			return {
				phone: '',
				password: '',
				userInfo:[],
				fontSize:''
			};
		},
		onLoad() {
			_self = this;
			//设置页面字体大小
			_self.fontSize = app.fontSize;
			_self.getUserInfo();
		},
		methods: {
			getUserInfo:function(){
				_self.userInfo = uni.getStorageSync('userInfo');
				if(_self.userInfo){
					_self.phone = _self.userInfo.PhoneNumber;
				}
			},
			//----------------------------------------用户登录----------------------------------------
			login() {
				if(!this.$h.verify.isPhone(this.phone)){
					_self.$u.toast('请输入正确的手机号');
					return ;
				}
				_self.GetLoginByTel();
			},
			GetLoginByTel:function(){
				uni.showLoading({
					title:'正在登录...'
				})
				uni.request({
					url:_self.$h.expressInterface.expressInterface.GetLoginByTel.url,
					method:_self.$h.expressInterface.expressInterface.GetLoginByTel.method,
					header:_self.$h.expressInterface.expressInterface.GetLoginByTel.header,
					data:{
						tel:_self.phone,
						password:_self.password,
						appSystemCode:_self.$h.expressInterface.expressInterface.appSystemCode.appSystemCode
					},success:function(res){
						uni.hideLoading();
						console.log('成功返回',res);
						if(res.data.Success){
							_self.$u.toast('登录成功');
							// uni.setStorage({
							// 	key:'userInfo',
							// 	data:JSON.stringify(res.data.Data)
							// })
							uni.setStorageSync('userInfo',JSON.parse(res.data.Data));
							setTimeout(function(){
								uni.navigateBack();
							},1000)
						}else {
							_self.$u.toast('登录失败');
						}
					},fail:function(res){
						uni.hideLoading();
						console.log('失败返回',res);
						_self.$u.toast('网络错误');
					}
				})
			},
			//----------------------------------------微信授权登录----------------------------------------
			wxLogin:function(){
				var getChina = require('../../components/wfgo-getChina/getChina.js');
				var address;
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						// 获取用户信息，在用户已授权的情况下调用此接口，可成功获取用户信息
						uni.getUserInfo({
							provider: 'weixin',
							success: function(res) {
								console.log('微信授权返回结果',res);
							},
							fail: function() {
								// theSelf.logining=false;
								_self.showToast('网络错误','error');
							}
						})
					}
				})
			},
			GetUserInfoByCode:function(openId){
				uni.request({
					url:_self.$h.expressInterface.expressInterface.GetUserInfoByCode.url,
					method:_self.$h.expressInterface.expressInterface.GetUserInfoByCode.method,
					header:_self.$h.expressInterface.expressInterface.GetUserInfoByCode.header,
					data:{
						code:openId,
						appid:'',
						appSystemCode:'',
						appsecret:''
					},success:function(res){
						console.log('成功返回',res);
						if(res.data.Success){
							_self.$u.toast('授权成功');
							// uni.setStorage({
							// 	key:'userInfo',
							// 	data:JSON.stringify(res.data.Data)
							// })
							// uni.setStorageSync('userInfo',JSON.parse(res.data.Data));
							setTimeout(function(){
								uni.navigateBack();
							},1000)
						}else {
							uni.showModal({
								title:'温馨提示',
								content:'暂未绑定绑定手机号，是否前往绑定手机号？',
								success(res) {
									if(res.confirm){
										uni.navigateTo({
											url:'./bindingPhone'
										})
									}
								}
							})
						}
					},fail:function(res){
						console.log('失败返回',res);
						_self.$u.toast('网络错误');
					}
				})
			},
			register() {
				uni.navigateTo({
					url: './Register'
				})
			},
			closed(){
				uni.navigateBackMiniProgram({
					extraData:{},
					success:function(){
						console.log('关闭应用成功');
					},
					fail:function(){
						console.log('关闭应用失败');
					}
				})
			},
			forgetPassWord: function() {
				uni.navigateTo({
					url: '../Mine/setPassWord/setPassWord'
				})
			}
		}
	};
</script>

<style>
	page {
		background-color: #fff;
	}

	.form-item {
		margin: 0 80rpx;
		padding: 40rpx 0;
		border-bottom: solid 1rpx #EAEAEA;
	}

	.bt-login {
		margin: 50rpx;
		margin-top: 50rpx;
		border-radius: 50rpx;
		color: #FFF;
		letter-spacing: 4rpx;
		box-shadow: 0px 7px 38px 8px rgba(235, 6, 70, 0.15);
	}

	.bt-re {
		margin: 50rpx;
		border-radius: 50rpx;
		color: #FC4646;
		letter-spacing: 4rpx;
		border: solid 1rpx #FC4646;
	}

	.bt-hover {
		background-color: rgba(252, 70, 70, 0.1);
	}

	.OAuthLogin {
		width: 100%;
		align-items: center;
		display: flex;
		justify-content: space-around;
		margin-top: 40rpx;
	}

	.wxClass {
		width: 67upx;
		height: 54upx;
	}
	.back{
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 70rpx;
		height: 70rpx;
		background-color: #FFF;
		border-radius:100%;
		top: 60rpx;
		left: 30rpx;
		z-index: 999999;
		background: linear-gradient(270deg, #fdfdfd, #FFF)
	}
</style>
